/* 按钮样式类 */
.btn{
	display: inline-block;
	text-align: center;
	padding: 8upx 24upx;
	background-color: $main;
	color: $mainInverse ;
	font-size: 28upx;
	border: 1px solid $main;
	-webkit-border-radius: 8upx;
	-moz-border-radius: 8upx;
	border-radius: 8upx;
	transition: 0.4s;
	white-space: nowrap;
	text-overflow: ellipsis;
	&.gradualBg{
		background-image: $mainGradual;
		color: $mainGradualInverse;
	}
	&.blackBg{
		background-color: $black;
		border-color: $black;
		color: #fff;
	}
	&.greenBg{
		background-color: $green;
		border-color: $green;
		color: #fff;
	}
	&.whiteBg{
		background-color: #fff;
		border-color: #fff;
		color: $main;
	}
	&.line{
		background-color: transparent;
		background-image: none;
		color: $main;
		&.blackBg{
			color: $black;
		}
		&.greenBg{
			color: $green;
		}
		&.whiteBg{
			color: #fff;
		}
	}
	&+.btn{
		margin-left: 20upx;
	}
	&.block{
	   padding: 20upx 24upx;
	   display: block;
	   width: 100%;
	   &+.btn{
		   margin-left: 0;
	   }
	}
	&.hover{
		-webkit-transform: scale(0.99);
		-moz-transform: scale(0.99);
		-ms-transform: scale(0.99);
		-o-transform: scale(0.99);
		transform: scale(0.99);
		opacity: 0.8;
	}
	&.disabled{
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		opacity: 0.4;
		cursor: not-allowed;
	}
	/* 尺寸单位 使用尺寸单位后，按钮将获得固定的宽高，应用场景：比如一个订单列表，有很多操作按钮，按钮的文字字数不一致时，使用尺寸按钮，将获得相同的按钮宽度样式。 */
	/* 下面这个尺寸是随便写的，可以删掉 */
	&.xs{ 
		width: 100upx;
		height: 40upx;
		padding: 0 4upx;
		font-size: 24upx;	
	}
	&.sm{
		width: 140upx;
		height: 60upx ;
		line-height: 50upx;
		padding: 0 4upx;
		font-size: 24upx;
	}
	&.md{
		width: 260upx;
		height: 90upx;
		line-height: 90upx;
		padding: 0 4upx;
		font-size: 32upx;
	}
	&.lg{
		
	}
	
	/* 其他颜色的按钮 */
	// @for $i from 1 through length($colorMap) {
	// 	$item : nth($colorMap , $i) ;
	// 	&.#{map-get( $item , name )}{
	// 		border-color: map-get( $item , color );
	// 		background-color: map-get( $item , color );
	// 		color: map-get( $item , inverse );
	// 		&.line{
	// 			background-color: transparent;
	// 			color: map-get( $item , color );
	// 		}
	// 	}
	// }
	
	// @for $i from 1 through length($gradualColorMap) {
	// 	$item : nth($gradualColorMap , $i) ;
	// 	&.#{map-get( $item , name )}{
	// 		border-color: transparent ;
	// 		background-image: map-get( $item , color );
	// 		color: map-get( $item , inverse );
	// 		&.line{
	// 			border-color: map-get( $item , safeColor );
	// 			background-color: transparent;
	// 			color: map-get( $item , safeColor )!important;
	// 			background-image: #{map-get( $item , colorRight )} !important;
	// 			-webkit-background-clip: text;
	// 			background-clip: text;
	// 			-webkit-text-fill-color: transparent!important;
	// 		}
	// 	}
	// }
	
}
 
 